<template>
	<div class="gender-distribution-dashboard">
		<div class="stats-container">
			<div class="count-cards">
				<div class="count-card male">
					<div class="count-value">{{ nan }}</div>
					<div class="count-label">在住男性</div>
				</div>
				<div class="count-card female">
					<div class="count-value">{{ nv }}</div>
					<div class="count-label">在住女性</div>
				</div>
				<div class="count-card total">
					<div class="count-value">{{ nan + nv }}</div>
					<div class="count-label">在住总人数</div>
				</div>
			</div>

			<div class="ratio-bar-container">
				<div class="ratio-percentage">
					<div class="male-percentage">{{ malePercent }}%</div>
					<div class="female-percentage">{{ femalePercent }}%</div>
				</div>

				<div class="ratio-bar">
					<div class="male-bar" :style="{ width: malePercent + '%' }"></div>
					<div class="female-bar" :style="{ width: femalePercent + '%' }"></div>
				</div>

				<div class="ratio-labels">
					<div class="male-label">男性</div>
					<div class="female-label">女性</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		sexFenBu
	} from "@/api/lock/menu";

	export default {
		data() {
			return {
				nan: 0,
				nv: 0,
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					flg_delete: 1 // 添加flg_delete参数
				}
			}
		},
		computed: {
			malePercent() {
				const total = this.nan + this.nv;
				return total > 0 ? Math.round((this.nan / total) * 100) : 50;
			},
			femalePercent() {
				const total = this.nan + this.nv;
				return total > 0 ? Math.round((this.nv / total) * 100) : 50;
			}
		},
		mounted() {
			this.getSexCount();
		},
		methods: {
			getSexCount() {
				sexFenBu(this.queryParams).then(response => {
					if (response.data) {
						this.nan = response.data.nan || 0;
						this.nv = response.data.nv || 0;
					} else {
						this.$message.error("获取男女入住统计数据失败");
					}
				}).catch(() => {
					this.$message.error("获取男女入住统计数据出错");
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
.gender-distribution-dashboard {
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	border-radius: 12px;
	overflow: hidden;
	padding: 25px;
	transition: all 0.3s ease;

	&:hover {
		box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
		transform: translateY(-4px);
	}

	.header {
		margin-bottom: 5px;
		text-align: center;

		.main-title {
			font-size: 22px;
			font-weight: 600;
			color: #333;
			margin: 0 0 5px 0;
		}
	}

	.stats-container {
		flex: 1;
		display: flex;
		flex-direction: column;
    justify-content: flex-start;
	}

	.count-cards {
		display: flex;
		justify-content: space-between;
		margin-bottom: 30px;

		.count-card {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 20px 10px;
			margin: 0 10px;
			border-radius: 12px;
			background-color: rgba(255, 255, 255, 0.9);
			box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
			transition: all 0.3s ease;

			&:hover {
				transform: translateY(-5px);
				box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
			}

			&.male {
				border-top: 4px solid #5470c6;
				.count-value {
					color: #5470c6;
				}
			}

			&.female {
				border-top: 4px solid #ee6666;
				.count-value {
					color: #ee6666;
				}
			}

			&.total {
				border-top: 4px solid #91cc75;
				.count-value {
					color: #91cc75;
				}
			}

			.count-value {
				font-size: 32px;
				font-weight: 700;
				line-height: 1.2;
				margin-bottom: 8px;
			}

			.count-label {
				font-size: 14px;
				color: #666;
				font-weight: 500;
			}
		}
	}

	.ratio-bar-container {
		margin-top: 20px;
		padding: 0 15px;

		.ratio-percentage {
			display: flex;
			justify-content: space-between;
			margin-bottom: 5px;
			font-weight: 600;

			.male-percentage {
				color: #5470c6;
			}

			.female-percentage {
				color: #ee6666;
			}
		}

		.ratio-bar {
			height: 30px;
			display: flex;
			overflow: hidden;
			border-radius: 15px;
			background-color: #f0f0f0;
			box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);

			.male-bar {
				height: 100%;
				background: linear-gradient(90deg, #5470c6, #749bff);
				transition: width 1s ease-in-out;
			}

			.female-bar {
				height: 100%;
				background: linear-gradient(90deg, #ee6666, #ff8a8a);
				transition: width 1s ease-in-out;
			}
		}

		.ratio-labels {
			display: flex;
			justify-content: space-between;
			margin-top: 5px;
			font-size: 13px;

			.male-label {
				color: #666;
			}

			.female-label {
				color: #666;
			}
		}
	}
}

@media screen and (max-width: 768px) {
	.gender-distribution-dashboard {
		padding: 20px 15px;

		.count-cards {
			flex-direction: row;
			flex-wrap: wrap;

			.count-card {
				padding: 15px 10px;
				margin: 0 5px 10px;

				.count-value {
					font-size: 26px;
				}

				.count-label {
					font-size: 13px;
				}
			}
		}
	}
}

@media screen and (max-width: 480px) {
	.gender-distribution-dashboard {
		padding: 15px 10px;

		.header {
			margin-bottom: 20px;

			.main-title {
				font-size: 18px;
			}
		}

		.count-cards {
			margin-bottom: 20px;

			.count-card {
				padding: 12px 5px;

				.count-value {
					font-size: 22px;
				}

				.count-label {
					font-size: 12px;
				}
			}
		}

		.ratio-bar {
			height: 24px !important;
			border-radius: 12px !important;
		}
	}
}
</style>
